import React, { Suspense } from 'react';
import { formatMessage } from 'umi-plugin-react/locale';
import PageLoading from '@/components/PageLoading';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { Card, Form, Select, DatePicker, Button, Table, message, Modal, Input, Icon, Menu, Dropdown, Checkbox, Pagination } from 'antd';
import { connect } from 'dva';
import moment from 'moment';
import RelatedKnowledge from '@/utils/RelatedKnowledge';
import EditingKnowledge from '@/pages/KnowledgeManagement/Overview/EditingKnowledge/editingKnowledge';
import ContextModal from '@/utils/contextModal';
import styles from './index.less';
import { getTenantAll, getRobotList } from '@/services/datastatistics';
import { getAgentList } from '@/services/assistantCenter';
import { getAssistantList } from '@/services/digitalEmployees';

import SessionContext from '@/components/common/SessionContext';
import commonStyles from '@/common/css/common.module.less';

class AnswerRecords extends React.Component {
  constructor(props) {
    super(props);
    this.columns = [
      // {
      //   title: '用户',
      //   dataIndex: 'userId',
      //   key: 'userId',
      //   width: 180
      // },
      {
        title: '名称',
        dataIndex: 'username',
        key: 'username',
        width: 180
      },
      {
        title: formatMessage({ id: 'answerRecords.question' }),
        dataIndex: 'question',
        customHeaderCell: () => ({ style: { textAlign: 'center' } }),
        width: 420,
        render: item => {
          return (
            <div
              style={{
                wordBreak: 'break-word',
                paddingLeft: 2,
                width: '100%',
                overflow: 'hidden'
              }}
            >
              <div>
                <div
                  style={{
                    width: 'calc(100% + 17px)',
                    maxHeight: '110px',
                    display: 'block',
                    overflow: 'auto',
                    overflowY: 'scroll',
                    padding: '0px 3px',
                  }}
                  dangerouslySetInnerHTML={{
                    __html: item
                  }}
                />
              </div>
            </div>
          );
        }
      },
      {
        title: formatMessage({ id: 'answerRecords.answer' }),
        dataIndex: 'answer',
        customHeaderCell: () => ({ style: { textAlign: 'center' } }),
        width: 560,
        render: item => {
          // if (this.isJson(item)) {
          //   return this.renderJsonCard(item);
          // };
          if (item.indexOf('img') != -1) {
            let a = item.replace('img', 'img style=""');
            let ahref = a;
            if (item.indexOf('href') != -1) {
              let reg = new RegExp('href="', 'g');
              ahref = item.replace(reg, `target='_blank' href="`);
            };

            return (
              <div className={styles.hdbj} onClick={() => this.openGaller(ahref)} style={{ wordBreak: 'break-word', paddingLeft: 2 }}>
                <div className={styles.hdbjB} dangerouslySetInnerHTML={{ __html: ahref }} />
              </div>
            );
          } else if (item.indexOf('href') != -1) {
            let ahref = '';
            let reg = new RegExp('href="', 'g');
            ahref = item.replace(reg, `target='_blank' href="`);

            return (
              <div className={styles.hdbj} style={{ wordBreak: 'break-word', paddingLeft: 2 }}>
                <div>
                  <div className={styles.hdbjB} dangerouslySetInnerHTML={{ __html: ahref }} />
                </div>
              </div>
            );
          };

          if (item.indexOf('#转人工#') != -1) {
            return (
              <div className={styles.hdbj} onClick={() => this.openGaller(ahref)} style={{ wordBreak: 'break-word', paddingLeft: 2 }}>
                <div className={styles.hdbjB}>人工客服</div>
              </div>
            );
          };

          return (
            <div className={styles.hdbj} style={{ wordBreak: 'break-word', paddingLeft: 2 }}>
              <div>
                <div className={styles.hdbjB} dangerouslySetInnerHTML={{ __html: item }} />
              </div>
            </div>
          );
          // return <div dangerouslySetInnerHTML={{ __html: item }} />
        },
      },
      {
        title: formatMessage({ id: 'answerRecords.channel' }),
        dataIndex: 'channel',
        key: 'channel',
        width: 220,
      },
      {
        title: formatMessage({ id: 'answerRecords.application' }),
        dataIndex: 'applicationName',
        key: 'applicationName',
        width: 150
      },
      {
        title: formatMessage({ id: 'answerRecords.sessionType' }),
        dataIndex: 'sessionType',
        key: 'sessionType',
        width: 180,
        render:(sessionType) => {
          switch(sessionType){
            case 0:
              return formatMessage({ id: 'answerRecords.dialogueQa' })
            case 1:
              return formatMessage({ id: 'answerRecords.documentQa' })
            case 2:
              return formatMessage({ id: 'answerRecords.assistantQa' })
            case 3:
              return formatMessage({ id: 'answerRecords.aiConsultant' })
          }
        }
      },
      {
        title: formatMessage({ id: 'answerRecords.agentName' }),
        dataIndex: 'agentName',
        key: 'agentName',
        width: 220,
      },
      {
        title: formatMessage({ id: 'answerRecords.source' }),
        dataIndex: 'questionType',
        align: 'center',
        width: 150,
        render: value => {
          switch (value) {
            case 1:
              return formatMessage({ id: 'answerRecords.qaKnowledge' });
            case 2:
              return formatMessage({ id: 'answerRecords.mapKnowledge' });
            case 3:
              return formatMessage({ id: 'answerRecords.multiTurnKnowledge' });
            case 4:
              return formatMessage({ id: 'answerRecords.keywordReply' });
            case 5:
              return formatMessage({ id: 'answerRecords.recommendedQuestion' });
            case 6:
              return formatMessage({ id: 'answerRecords.unknownQuestion' });
            case 7:
              return formatMessage({ id: 'answerRecords.artificialCustomerService' });
            case 8:
              return formatMessage({ id: 'answerRecords.documentQa' });
            case 9:
              return formatMessage({ id: 'answerRecords.modelGenerated' });
            default:
              return formatMessage({ id: 'answerRecords.other' });
          };
          return text;
        }
      },
      {
        title: formatMessage({ id: 'answerRecords.feedback' }),
        dataIndex: 'resolveFlag',
        align: 'center',
        width: 100,
        render: item => {
          switch (item) {
            case 0:
              return formatMessage({ id: 'answerRecords.noFeedback' });
            case 1:
              return formatMessage({ id: 'answerRecords.like' });
            case 2:
              return formatMessage({ id: 'answerRecords.dislike' });
            case 3:
              return formatMessage({ id: 'answerRecords.satisfied' });
            case 4:
              return formatMessage({ id: 'answerRecords.average' });
            case 5:
              return formatMessage({ id: 'answerRecords.dissatisfied' });
            default:
              return '';
          };
        },
      },
      {
        title: formatMessage({ id: 'answerRecords.comment' }),
        dataIndex: 'comment',
        align: 'center',
        width: 220,
      },
      {
        title: formatMessage({ id: 'answerRecords.time' }),
        dataIndex: 'createTime',
        align: 'center',
        width: 180,
        render: text => {
          if (text) {
            return moment(text).format('YYYY-MM-DD HH:mm:ss');
          }
        },
      },
      // {
      //   title: '会话ID',
      //   dataIndex: 'sessionId',
      //   align: 'center',
      //   width: 250,
      // },
      {
        title: '输入模块',
        dataIndex: 'touchType',
        align: 'center',
        width: 150,
        render: value => {
          switch (value) {
            case 1:
              return formatMessage({ id: 'answerRecords.userInput' });
            case 2:
              return formatMessage({ id: 'answerRecords.associativeInput' });
            case 3:
              return formatMessage({ id: 'answerRecords.commonQuestion' });
            case 4:
              return formatMessage({ id: 'answerRecords.recommendedQuestion' });
            case 5:
              return formatMessage({ id: 'answerRecords.relatedQuestion' });
            case 6:
              return formatMessage({ id: 'answerRecords.hotQuestion' });
            case 7:
              return formatMessage({ id: 'answerRecords.bottomLabel' });
            case 8:
              return formatMessage({ id: 'answerRecords.multiClick' });
            default:
              return formatMessage({ id: 'answerRecords.other' });
          };
        }
      },
    ];
    this.state = {
      tenantList: [],
      applyList: [],
      queryData: {
        tenantId: undefined,
        applicationId: '0',
        fromDate: '',
        toDate: '',
        current: 1,
        size: 10,
        touchType: null,
        search: '',
        searchType: 1,
        solveStatus: null,
        sessionType:null,
        agentId:null,
        channel:null,
        comment:null
      },
      list: [],
      total: 0,
      loading: false,
      relatedVisible: false,
      question: '',
      contextModalVisible: false,
      contextMessage: [],
      reviewImgSrc: '',
      imgReviewVisible: false,

      visible: false,
      isTableTab: {
        "userId": true,
        "username": true,
        "question": true,
        "answer": true,
        "channel": true,
        "applicationName": true,
        "sessionType": true,
        "agentName": true,
        "questionType": true,
        "resolveFlag": true,
        "comment": true,
        "createTime": true,
        "sessionId": true,
        "touchType": true
      },
      menuCheckList:[
        {
            "dataIndex": "userId",
            "title": formatMessage({ id: 'answerRecords.user' })
        },
        {
            "dataIndex": "username",
            "title": formatMessage({ id: 'answerRecords.username' })
        },
        {
            "dataIndex": "question",
            "title": formatMessage({ id: 'answerRecords.question' })
        },
        {
            "dataIndex": "answer",
            "title": formatMessage({ id: 'answerRecords.answer' })
        },
        {
            "dataIndex": "channel",
            "title": formatMessage({ id: 'answerRecords.channel' })
        },
        {
            "dataIndex": "applicationName",
            "title": formatMessage({ id: 'answerRecords.application' })
        },
        {
            "dataIndex": "sessionType",
            "title": formatMessage({ id: 'answerRecords.sessionType' })
        },
        {
            "dataIndex": "agentName",
            "title": formatMessage({ id: 'answerRecords.agentName' })
        },
        {
            "dataIndex": "questionType",
            "title": formatMessage({ id: 'answerRecords.source' })
        },
        {
            "dataIndex": "resolveFlag",
            "title": formatMessage({ id: 'answerRecords.feedback' })
        },
        {
            "dataIndex": "comment",
            "title": formatMessage({ id: 'answerRecords.comment' })
        },
        {
            "dataIndex": "createTime",
            "title": formatMessage({ id: 'answerRecords.time' })
        },
        {
            "dataIndex": "sessionId",
            "title": formatMessage({ id: 'answerRecords.sessionId' })
        },
        {
            "dataIndex": "touchType",
            "title": formatMessage({ id: 'answerRecords.inputModule' })
        }
    ],
      agentList:[],
      sessionContextModalVisible: false,
      currentSessionContextInfo: null,
      
    };
  }

  componentWillMount() {
    let { queryData } = this.state;
    const fromDate = moment().subtract('7', 'days').format('YYYY-MM-DD');
    const toDate = moment().format('YYYY-MM-DD');
    queryData.fromDate = fromDate;
    queryData.toDate = toDate;
    this.setState({ queryData });
  }

  componentDidMount() {
    this.getList();
    const { currentUser } = this.props;
    if (currentUser.tenantId === '2') {
      this.getTenant();
    } else {
      this.getApply();
    }
    let a = this.columns.map(item => {return {dataIndex:item.dataIndex,title:item.title}})
    console.log(a);
  }

  /**
   * 获取所有机器人（作为筛选条件）
   */
  getTenant = async () => {
    let res = await getTenantAll();
    this.setState({ tenantList: res }, () => this.getRobot(null));
  };
  getRobot = async (value) => {
    if (value && value !== '0') {
      let res = await getRobotList({ tenantId: value });
      this.setState({ applyList: res });
    } else {
      this.setState({ applyList: [] }, () => {
        this.props.form.setFieldsValue({ "applicationId": '0' })
      });
    }
  };
  getApply = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'answerRecordsList/fetchRobotList',
      payload: { current: 1, size: 999999 },
      callback: res => {
        this.setState({ applyList: res, });
      },
    });
  };

  /**
   *获取列表
   */
  getList = () => {
    const { queryData } = this.state;
    const { dispatch, currentUser } = this.props;
    this.setState({ loading: true, }, () => {
      if(currentUser.applicationId){
        queryData.applicationId = currentUser.applicationId
      }
      dispatch({
        type: 'answerRecordsList/fetchRecordsList',
        payload: queryData,
        callback: res => {
          // console.log(res);
          this.setState({ list: res.records, total: res.total, loading: false, });
        },
      });
    });
  };

  /**
   * 分页查询
   * @returns {*}
   */
  queryByPage = (page, pageSize) => {
    let { queryData } = this.state;
    queryData.current = page;
    queryData.size = pageSize;
    this.setState({ queryData }, () => this.getList());
  };

  /**
   * 根据条件查询
   * @returns {*}
   */
  queryByCondition = () => {
    let { queryData } = this.state;
    let formInfo = this.props.form.getFieldsValue();
    queryData.fromDate = formInfo.time[0].format('YYYY-MM-DD');
    queryData.toDate = formInfo.time[1].format('YYYY-MM-DD');
    queryData.current = 1;
    queryData.tenantId = formInfo.tenantId ? formInfo.tenantId : undefined;
    queryData.applicationId = formInfo.applicationId ? formInfo.applicationId : '0';
    queryData.questionType = formInfo.questionType;
    queryData.touchType = formInfo.touchType;
    queryData.solveStatus = formInfo.solveStatus;
    queryData.search = formInfo.search;
    queryData.searchType = formInfo.searchType;
    queryData.sessionType = formInfo.sessionType;
    queryData.channel = formInfo.channel;
    queryData.comment = formInfo.comment
    if(formInfo.sessionType == 2 || formInfo.sessionType == 3){
      queryData.agentId = formInfo.agentId
    }else{
      queryData.agentId = null
    }

    this.setState({ queryData }, () => this.getList());
  };

  /**
   * 打开关联问
   */
  openRelatedModal = row => {
    this.setState({ relatedVisible: true, question: row.question, qaId: row.id }, () => {
      this.RelatedKnowledge.getList()
    });
  };

  /**
   * 关闭关联问modal
   */
  closeRelatedModal = () => {
    this.setState({ relatedVisible: false }, () => {
      this.RelatedKnowledge.setRelatedList([]);
    });
  };

  /**
   * 关联问选择后的回调
   * @returns {*}
   */
  getRelatedList = data => { };

  /**
   * 关联问确定之后的回调
   */
  selectAction = data => {
    const qaIds = data.map(item => item.id);
    const { question } = this.state;
    const { dispatch } = this.props;
    dispatch({
      type: 'answerRecordsList/relatedQuestion',
      payload: { qaIds, question },
      callback: res => {
        message.info(res.message);
        this.setState({ question: '' });
      },
    });
  };

  /**
   * 打开新增modal
   */
  openEditModal = row => {
    this.EditingKnowledge.showEditDrawerFromAmendantRecord(row.question);
  };

  /**
   * 新增保存后的回调
   * @returns {*}
   */
  refreshList = () => {
    this.getList();
  };

  handleSessionContextShow = async row => {
    this.setState({
      sessionContextModalVisible: true,
      currentSessionContextInfo: row,
    });
  }

  handleSessionContextHide = () => {
    this.setState({
      sessionContextModalVisible: false,
      currentSessionContextInfo: null,
    });
  }

  /**
   * 导出
   * @returns {*}
   */
  exportRecords = () => {
    const { queryData } = this.state;
    let formInfo = this.props.form.getFieldsValue();
    queryData.fromDate = formInfo.time[0].format('YYYY-MM-DD');
    queryData.toDate = formInfo.time[1].format('YYYY-MM-DD');
    queryData.applicationId = formInfo.applicationId ? formInfo.applicationId : '0';
    queryData.questionType = formInfo.questionType;
    queryData.touchType = formInfo.touchType;
    queryData.search = formInfo.search;
    queryData.solveStatus = formInfo.solveStatus;
    queryData.searchType = formInfo.searchType;
    const { dispatch } = this.props;
    dispatch({
      type: 'answerRecordsList/exportAnswerRecords',
      payload: queryData,
      callback: res => { },
    });
  };

  /**
   * 打开图片放大
   * @returns {*}
   */
  openGaller = imgSrc => {
    this.setState({ imgReviewVisible: true, reviewImgSrc: imgSrc });
  };

  isJson = str => {
    if (typeof str == 'string') {
      try {
        var obj = JSON.parse(str);
        if (typeof obj == 'object' && obj) {
          return true;
        } else {
          return false;
        }
      } catch (e) {
        return false;
      }
    }
  };

  renderJsonCard = data => {
    const json = JSON.parse(data);
    return (
      <div>
        <p>{json.data.guide}</p>
        <a href={json.data.link}>
          <div className={styles.jsonCard}>
            <div className={styles.jsonCardTitle}>{json.data.title}</div>
            <div className={styles.jsonCardBody}>
              <div>{json.data.desc}</div>
              {json.data.imgUrl ? <img src={json.data.imgUrl} alt="" /> : ''}
            </div>
          </div>
        </a>
      </div>
    );
  };

  handleVisibleChange = flag => {
    this.setState({ visible: flag });
  };

  onCheckboxChange = (e, type) => {
    let { isTableTab } = this.state;
    isTableTab[type] = e.target.checked;
    this.setState({ isTableTab });
  }

    //获取所有助手
    getAllAgent = async () => {
      const res = await getAgentList({search:"",current:1,size:999})
      this.setState({
        agentList:res.records ? res.records : []
      })
    }
  
    //获取所有AI咨询师
    getAllDigitalEmployees = async () => {
      const res = await getAssistantList()
      this.setState({
        agentList:res ? res : []
      })
    }
  
    changeSessionType = value => {
      this.props.form.resetFields("agentId")
      if(value == 2){
        this.getAllAgent()
      }else if(value == 3){
        this.getAllDigitalEmployees()
      }
    }

  render() {
    const {
      tenantList, applyList, list, total, loading, queryData, relatedVisible,
      contextModalVisible, contextMessage, imgReviewVisible, reviewImgSrc, isTableTab,agentList,menuCheckList,sessionContextModalVisible, currentSessionContextInfo,
    } = this.state;
    const { currentUser } = this.props;
    const { getFieldDecorator,getFieldValue } = this.props.form;
    let columns = [...this.columns];
    if (currentUser.tenantId === '2') {
      columns.push({
        title: formatMessage({ id: 'answerRecords.tenantName' }),
        dataIndex: 'tenantName',
        align: 'center',
        width: 200,
      }, {
        title: formatMessage({ id: 'answerRecords.action' }),
        width: 300,
        fixed: 'right',
        align: 'center',
        render: (text, row, index) => {
          return (
            <div style={{ display: 'flex', gap: '12px' }}>
              {row.questionType == 7 ? (
                <Button type='primary' onClick={() => this.handleSessionContextShow(row)} block>{formatMessage({ id: 'answerRecords.context' })}</Button>
              ) : (
                <>
                  <Button type='primary' onClick={() => this.openRelatedModal(row)} block>{formatMessage({ id: 'answerRecords.related' })}</Button>
                  <Button type='primary' onClick={() => this.openEditModal(row)} block>{formatMessage({ id: 'answerRecords.add' })}</Button>
                  <Button type='primary' onClick={() => this.handleSessionContextShow(row)} block>{formatMessage({ id: 'answerRecords.context' })}</Button>
                </>
              )}
            </div>
          );
        },
      })
    } else {
      columns.push({
        title: formatMessage({ id: 'answerRecords.operation' }),
        width: 300,
        fixed: 'right',
        align: 'center',
        render: (text, row, index) => {
          return (
            <div style={{ display: 'flex', gap: '12px' }}>
              {row.questionType == 7 ? (
                <Button type='primary' onClick={() => this.handleSessionContextShow(row)} block>{formatMessage({ id: 'answerRecords.context' })}</Button>
              ) : (
                <>
                  <Button type='primary' onClick={() => this.openRelatedModal(row)} block>{formatMessage({ id: 'answerRecords.related' })}</Button>
                  <Button type='primary' onClick={() => this.openEditModal(row)} block>{formatMessage({ id: 'answerRecords.add' })}</Button>
                  <Button type='primary' onClick={() => this.handleSessionContextShow(row)} block>{formatMessage({ id: 'answerRecords.context' })}</Button>
                </>
              )}
            </div>
          );
        },
      })
    };
    const menu = (
      <Menu onClick={() => { }}>
        {
          menuCheckList.map(item => (
            <Menu.Item>
              <Checkbox onChange={e => this.onCheckboxChange(e, item.dataIndex)} checked={isTableTab[item.dataIndex]}>{item.title}</Checkbox>
            </Menu.Item>
          ))
        }
      </Menu>
    );
    columns = columns.filter(item => (item.dataIndex && isTableTab[item.dataIndex]) || !item.dataIndex);

    return (
      <div style={{ height: '100%' }}>
        <Suspense fallback={<PageLoading />}>
          <PageHeaderWrapper>
            <Card bodyStyle={{ paddingBottom: 6, paddingTop: 0 }} style={{ height: '100%' }}>
              <div className={styles.answerRecordsListClass}>
                <Form layout='inline'>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '16px', }}>
                    <div>
                      <Form.Item>
                        {getFieldDecorator('time', {
                          initialValue: [moment().subtract('7', 'days'), moment()],
                        })(<DatePicker.RangePicker allowClear={false} style={{ width: '250px' }} />)}
                      </Form.Item>
                      {currentUser.tenantId === '2' ? (
                        <Form.Item>
                          {getFieldDecorator('tenantId', { initialValue: '0' })(
                            <Select style={{ width: 140 }} placeholder={formatMessage({ id: 'answerRecords.selectTenant' })} onChange={value => this.getRobot(value)}>
                              <Select.Option value='0'>{formatMessage({ id: 'answerRecords.allTenants' })}</Select.Option>
                              {tenantList.map(item => {
                                return (
                                  <Select.Option value={item.id} key={item.id}>{item.name}</Select.Option>
                                );
                              })}
                            </Select>
                          )}
                        </Form.Item>
                      ) : null}
                      {
                        currentUser.applicationId ? null : (
                            <Form.Item>
                              {getFieldDecorator('applicationId', { initialValue: '0' })(
                                  <Select style={{ width: 120 }} placeholder={formatMessage({ id: 'answerRecords.selectApplication' })}>
                                    <Select.Option value='0'>{formatMessage({ id: 'answerRecords.allApplications' })}</Select.Option>
                                    {applyList.map(item => {
                                      return (
                                          <Select.Option value={item.id} key={item.id}>{item.name}</Select.Option>
                                      );
                                    })}
                                  </Select>
                              )}
                            </Form.Item>
                        )
                      }
                      <Form.Item>
                        {getFieldDecorator('sessionType', { initialValue: null })(
                          <Select style={{ width: 120 }} placeholder={formatMessage({ id: 'answerRecords.selectSessionType' })} onChange={this.changeSessionType}>
                            <Select.Option value={null}>{formatMessage({ id: 'answerRecords.sessionType' })}</Select.Option>
                            <Select.Option value={0}>{formatMessage({ id: 'answerRecords.dialogueQa' })}</Select.Option>
                            <Select.Option value={1}>{formatMessage({ id: 'answerRecords.documentQa' })}</Select.Option>
                            {/* <Select.Option value={2}>{formatMessage({ id: 'answerRecords.assistantQa' })}</Select.Option> */}
                            <Select.Option value={3}>{formatMessage({ id: 'answerRecords.aiConsultant' })}</Select.Option>
                          </Select>
                        )}
                      </Form.Item>
                      {
                        getFieldValue("sessionType") == 2 || getFieldValue("sessionType") == 3 ? (
                          <Form.Item>
                            {getFieldDecorator('agentId', { initialValue: null })(
                              <Select style={{ width: 200 }} placeholder={formatMessage({ id: 'answerRecords.select' })}>
                                <Select.Option value={null}>{getFieldValue("sessionType") == 2 ? formatMessage({ id: 'answerRecords.allAssistants' }) : formatMessage({ id: 'answerRecords.allAiConsultants' })}</Select.Option>
                                {
                                  agentList.map(item => (
                                    <Select.Option value={item.id} key={item.id}>{item.name}</Select.Option>
                                  ))
                                }
                                <Select.Option value={'other'}>{formatMessage({ id: 'answerRecords.other' })}</Select.Option>
                              </Select>
                            )}
                          </Form.Item>
                        ) : ''
                      }
                      <Form.Item>
                        {getFieldDecorator('channel', { initialValue: null })(
                          <Select style={{ width: 120 }} placeholder={formatMessage({ id: 'answerRecords.inboundChannel' })}>
                            <Select.Option value={null}>{formatMessage({ id: 'answerRecords.inboundChannel' })}</Select.Option>
                            <Select.Option value={'web'}>web</Select.Option>
                          </Select>
                        )}
                      </Form.Item>
                      <Form.Item>
                        {getFieldDecorator('solveStatus', { initialValue: null })(
                          <Select style={{ width: 140 }} placeholder={formatMessage({ id: 'answerRecords.selectFeedback' })}>
                            <Select.Option value={null}>{formatMessage({ id: 'answerRecords.allFeedback' })}</Select.Option>
                            <Select.Option value={1}>{formatMessage({ id: 'answerRecords.like' })}</Select.Option>
                            <Select.Option value={2}>{formatMessage({ id: 'answerRecords.dislike' })}</Select.Option>
                            <Select.Option value={0}>{formatMessage({ id: 'answerRecords.noFeedback' })}</Select.Option>
                          </Select>
                        )}
                      </Form.Item>
                      <Form.Item>
                        {getFieldDecorator('comment', { initialValue: null })(
                          <Select style={{ width: 140 }} placeholder={formatMessage({ id: 'answerRecords.selectEvaluation' })}>
                            <Select.Option value={null}>{formatMessage({ id: 'answerRecords.allEvaluations' })}</Select.Option>
                            <Select.Option value={'答案与问题无关'}>{formatMessage({ id: 'answerRecords.irrelevantAnswer' })}</Select.Option>
                            <Select.Option value={'引用片段不完整'}>{formatMessage({ id: 'answerRecords.incompleteQuote' })}</Select.Option>
                            <Select.Option value={'内容不完整'}>{formatMessage({ id: 'answerRecords.incompleteContent' })}</Select.Option>
                            <Select.Option value={'有虚构内容'}>{formatMessage({ id: 'answerRecords.fictionalContent' })}</Select.Option>
                            <Select.Option value={'生成内容有风险'}>{formatMessage({ id: 'answerRecords.riskyContent' })}</Select.Option>
                            <Select.Option value={'知识点需更新'}>{formatMessage({ id: 'answerRecords.knowledgeUpdate' })}</Select.Option>
                          </Select>
                        )}
                      </Form.Item>
                      <Form.Item>
                        {getFieldDecorator('questionType', { initialValue: null })(
                          <Select style={{ width: 130 }} placeholder={formatMessage({ id: 'answerRecords.selectSource' })}>
                            <Select.Option value={null}>{formatMessage({ id: 'answerRecords.allSources' })}</Select.Option>
                            <Select.Option value={1}>{formatMessage({ id: 'answerRecords.qaKnowledge' })}</Select.Option>
                            <Select.Option value={2}>{formatMessage({ id: 'answerRecords.mapKnowledge' })}</Select.Option>
                            <Select.Option value={3}>{formatMessage({ id: 'answerRecords.multiTurnKnowledge' })}</Select.Option>
                            <Select.Option value={4}>{formatMessage({ id: 'answerRecords.keywordReply' })}</Select.Option>
                            <Select.Option value={5}>{formatMessage({ id: 'answerRecords.recommendedQuestion' })}</Select.Option>
                            <Select.Option value={6}>{formatMessage({ id: 'answerRecords.unknownQuestion' })}</Select.Option>
                            <Select.Option value={8}>{formatMessage({ id: 'answerRecords.documentQa' })}</Select.Option>
                            <Select.Option value={9}>{formatMessage({ id: 'answerRecords.modelGenerated' })}</Select.Option>
                            <Select.Option value={0}>{formatMessage({ id: 'answerRecords.other' })}</Select.Option>
                          </Select>
                        )}
                      </Form.Item>
                      <Form.Item>
                        {getFieldDecorator('touchType', { initialValue: null, })(
                          <Select style={{ width: 120 }} placeholder={formatMessage({ id: 'answerRecords.selectInputModule' })}>
                            <Select.Option value={null}>{formatMessage({ id: 'answerRecords.inputModule' })}</Select.Option>
                            <Select.Option value={1}>{formatMessage({ id: 'answerRecords.userInput' })}</Select.Option>
                            <Select.Option value={2}>{formatMessage({ id: 'answerRecords.associativeInput' })}</Select.Option>
                            {/* <Select.Option value={3}>常见问题</Select.Option> */}
                            <Select.Option value={4}>{formatMessage({ id: 'answerRecords.recommendedQuestion' })}</Select.Option>
                            <Select.Option value={5}>{formatMessage({ id: 'answerRecords.relatedQuestion' })}</Select.Option>
                            <Select.Option value={6}>{formatMessage({ id: 'answerRecords.hotQuestion' })}</Select.Option>
                            <Select.Option value={7}>{formatMessage({ id: 'answerRecords.bottomLabel' })}</Select.Option>
                            <Select.Option value={8}>{formatMessage({ id: 'answerRecords.multiClick' })}</Select.Option>
                            <Select.Option value={0}>{formatMessage({ id: 'answerRecords.other' })}</Select.Option>
                          </Select>
                        )}
                      </Form.Item>
                      
                      <Form.Item>
                        {getFieldDecorator('search')(<Input placeholder={formatMessage({ id: 'answerRecords.enterKeyword' })} />)}
                      </Form.Item>
                      <Form.Item>
                        <Button type='primary' onClick={this.queryByCondition}>{formatMessage({ id: 'answerRecords.query' })}</Button>
                      </Form.Item>
                      <Form.Item>
                        <Dropdown overlay={menu} placement="bottomCenter" trigger={['click']} onVisibleChange={this.handleVisibleChange} visible={this.state.visible}>
                          <Button icon='control'></Button>
                        </Dropdown>
                      </Form.Item>
                    </div>
                    <Form.Item style={{ margin: 0 }}>
                      <Button onClick={this.exportRecords}>{formatMessage({ id: 'answerRecords.export' })}</Button>
                    </Form.Item>
                  </div>
                </Form>
              </div>
              <div style={{ margin: '20px 0 0' }} className={styles.AnswerRecords}>
                <Table
                  rowKey={'id'}
                  columns={columns}
                  dataSource={list}
                  loading={loading}
                  pagination={false}
                  scroll={{ x: 1000, y: 640 }}
                />
                {total > 10 ? (
                  <Pagination
                    style={{ textAlign: 'right', marginTop: 16 }}
                    total={total}
                    current={queryData.current}
                    onChange={this.queryByPage}
                    showSizeChanger={true}
                    onShowSizeChange={this.queryByPage}
                    showQuickJumper={true}
                  />
                ) : null}
              </div>
              <RelatedKnowledge
                visible={relatedVisible}
                onClose={this.closeRelatedModal}
                getRelatedList={this.getRelatedList}
                onRef={ref => (this.RelatedKnowledge = ref)}
                qaId={this.state.qaId}
                type={'answerRecords'}
                question={this.state.question}
              />
              <EditingKnowledge
                onRef={ref => (this.EditingKnowledge = ref)}
                refreshList={this.refreshList}
                categoryId={null}
                authority={2}
                ifCapacity={true}
              />
              <Modal
                centered={true}
                destroyOnClose={true}
                footer={null}
                title={formatMessage({ id: 'answerRecords.chatContext' })}
                visible={sessionContextModalVisible}
                width={'75vw'}
                bodyStyle={{
                  maxHeight: 'calc(100vh - 120px)',
                  overflow: 'auto',
                  backgroundColor: '#f7f8fd',
                }}
                wrapClassName={commonStyles['hide-scroll']}
                onCancel={this.handleSessionContextHide}
                onOk={this.handleSessionContextHide}
              >
                <SessionContext
                  applicationId={currentSessionContextInfo?.applicationId}
                  sessionId={currentSessionContextInfo?.sessionId}
                  userId={currentUser.id}
                />
              </Modal>
              <Modal
                bodyStyle={{ maxHeight: '80vh', overflow: 'auto', }}
                width={'calc(80vw)'}
                className="modalovel"
                visible={imgReviewVisible}
                title={formatMessage({ id: 'answerRecords.imageDetails' })}
                onCancel={() => this.setState({ imgReviewVisible: false, })}
                footer={null}
              >
                <div dangerouslySetInnerHTML={{ __html: reviewImgSrc }} />
              </Modal>
            </Card>
          </PageHeaderWrapper>
        </Suspense>
      </div>
    );
  }
}

export default connect(({ user }) => ({
  currentUser: user.currentUser,
}))(Form.create()(AnswerRecords));
